<template>
    <div id='cart'>
        <header1></header1>
            <div class="total_count">全部商品<em>{{total_count}}</em>件</div>
    <ul class="cart_list_th clearfix">
        <li class="col01">商品名称</li>
        <li class="col03">商品价格</li>
        <li class="col04">数量</li>
        <li class="col05">小计</li>
        <li class="col06">操作</li>
    </ul>
    <ul class="cart_list_td clearfix" v-for="(sku,index) in cart" :key="sku.id">
        <li class="col01"><input type="checkbox" v-model="cart_checked" @click="update_selected(sku)" :value="sku.id"></li>
        <li class="col02"><img :src="sku.image_url"></li> 
        <li class="col03">{{ sku.name }}</li>
        <li class="col05">{{ sku.price }}元</li>
        <li class="col06">
            <div class="num_add">
                <a  @click="on_add(sku,index)" class="add fl">+</a>
                <input v-model="sku.number"  type="text" class="num_show fl">
                <a @click="on_minus(sku,index)" class="minus fl">-</a>
            </div>
        </li>
        <li class="col07">{{sku.price * sku.number}}元</li>
        <li class="col08"><a @click="on_delete(sku)">删除</a></li>
    </ul>

    <ul class="settlements">
        <li class="col01"></li>
        <li class="col02"></li>
        <li class="col03">合计(不含运费)：<span>¥</span><em>{{total_selected_amount}}</em><br>共计<b>{{total_selected_count}}</b>件商品</li>
        <li class="col04"><button @click='confirm_pay()'>去结算</button></li>
    </ul>
    {{cart_checked}}
    <footer1></footer1>
    </div>
</template>

<script>
import Header1 from '@/components/Header'
import Footer1 from '@/components/Footer'
import {send} from '../../static/js/oss'
import {cart_zhanshi,update_cart,delete_cart,send_buy_info }  from './axios_api/api.js'
export default{
    name:'cart',
    components:{
		header1:Header1,
		footer1:Footer1
    },
    data:function(){
        return{
            cart:[],
            total_count:0,
            total_selected_amount:0,
            total_selected_count:0,
            cart_checked:[],//初始一个列表，所有选中的id
            // number:0,
        }
    },
    computed:{
        getCartlist:function(){
            
    },
    },
    methods:{
        on_add:function(sku,index){
            // this.number+=1
            sku.number+=1
            var data={"id":sku.id,"number":sku.number}
            update_cart(data)
            .then(res=>{
                var is_exits = this.cart_checked.indexOf(sku.id)
                    if(is_exits>=0){
                        this.total_selected_amount += sku.price
                        this.total_selected_count += 1
                    }
                console.log(res)
            })
        },
        on_minus:function(sku,index){
            if(sku.number>1){
                sku.number -= 1
                var data={"id":sku.id,"number":sku.number}
                update_cart(data)
                .then(res=>{
                    var is_exits = this.cart_checked.indexOf(sku.id)
                    if(is_exits>=0){
                        this.total_selected_amount -= sku.price
                        this.total_selected_count -= 1
                    }
                    console.log(res)
                })
            }else{
                alert("想啥呢,到底了")
            }
        },
        update_selected:function(sku){
            var is_exits = this.cart_checked.indexOf(sku.id)
            if (is_exits>=0){
                this.total_selected_count -= sku.number
                this.total_selected_amount -= sku.number*sku.price
            }else{
                 this.total_selected_count += sku.number
                 this.total_selected_amount += sku.number*sku.price
            }
        },
        confirm_pay:function(){
            var data = {"buys_info":this.cart_checked}
            send_buy_info(data)
            .then(res=>{
                console.log(res)
                if(res.code==200){
                    this.$router.push({path:"/order"})
                }
            })
        },
        on_delete(sku){
            var data={"id":sku.id}
            delete_cart(data)
            .then(res=>{
                console.log(res)
                if(res.code==200){
                    alert("删除成功")
                }else{
                    alert("删除失败")
                }
            })
        },
        select_one(){
            cart_zhanshi()
            .then(res=>{
                console.log(res)
                if(res.code==200){
                  this.cart = res.data
                }
            })
        },
    },
    created(){
        this.select_one()
    }
}
    


</script>